<!DOCTYPE html>
<html lang="zh">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<head>
    <meta charset="UTF-8">
    <title>Upload File Page</title>
    <style>
        div {
            margin: 2rem;
        }

        .progress {
            background-color: #0000ff52;
            height: 1.5rem;
            text-align: center;
            display: none;
            margin: 0;
            overflow: hidden;
        }
    </style>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script>
        $(() => {
            let $subBtn = $("#subBtn");
            $subBtn.click((e) => {
                $subBtn.attr({"disabled": ""});
                // 上传数据
                let param = {
                    "url": "../uploadFile",
                    "processData": false, // 将数据转换成对象，不对数据做处理，故 processData: false
                    "contentType": false,    // 不设置数据类型
                    "data": new FormData($('#subForm')[0]),
                    "method": "post",
                    "success": (data) => {
                        param["successData"] = data;
                    },
                    "error": () => param.error = true,
                    // 上传成功关闭进度条显示
                    "complete": () =>
                        $(".progress").fadeToggle("fast", () => {
                            let data = param.successData;
                            if (data) {
                                if (data.code == 1)
                                    alert("上传成功");
                                else
                                    alert(data.msg);
                            } else {
                                alert("上传失败");
                            }
                            $subBtn.removeAttr("disabled")
                        })
                    ,
                    "xhr": () => { //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
                        myXhr = $.ajaxSettings.xhr();

                        if (myXhr.upload) { //检查upload属性是否存在
                            //绑定progress事件的回调函数
                            myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
                        }

                        return myXhr; //xhr对象返回给jQuery使用
                    },
                };
                $.ajax(param);
                // 展示进度条
                $(".progress").fadeToggle("fast").css({"width": 0}).text("")
            });

            /**
             * 控制进度条
             * @param e
             */
            function progressHandlingFunction(e) {
                let curr = e.loaded;
                let total = e.total;
                let process = Math.round(curr / total * 100);
                $(".progress").animate({"width": process + "%"}, "fast").text(process + " %")
            }
        })
    </script>
</head>
<body>
<form id="subForm" enctype="multipart/form-data" action="../uploadFile" method="post">
    <div>
        <input type="file" name="file" multiple="multiple"/>
    </div>
    <div>
        <input type="button" id="subBtn" value="上传"/>
    </div>
    <div>
        <div class="progress"></div>
    </div>
</form>
</body>
</html>